<template>
  <qs-dialog
    v-model="visible"
    :append-to-body="true"
    :center="true"
    :close-on-click-modal="true"
    :draggable="true"
    :title="title"
    :width="width"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <div class="detail-container">
      <el-descriptions border class="detail-descriptions" :column="1">
        <el-descriptions-item v-if="detailData.id" label="ID">
          {{ detailData.id }}
        </el-descriptions-item>

        <el-descriptions-item label="会议室名称">
          <span class="important-field">{{ detailData.roomName || '暂无数据' }}</span>
        </el-descriptions-item>

        <el-descriptions-item label="面积(m²)">{{ detailData.area || '0' }} m²</el-descriptions-item>

        <el-descriptions-item label="容量">{{ detailData.capacity || '0' }} 人</el-descriptions-item>

        <el-descriptions-item label="联系人">
          {{ detailData.linkman || '暂无数据' }}
        </el-descriptions-item>

        <el-descriptions-item label="位置描述">
          {{ detailData.positionDescription || '暂无数据' }}
        </el-descriptions-item>

        <el-descriptions-item label="设备配置">
          <div v-if="equipmentTags.length > 0" class="equipment-tags">
            <el-tag
              v-for="(item, index) in equipmentTags"
              :key="index"
              class="equipment-tag"
              effect="plain"
              size="small"
              :type="getEquipmentTagType(item)"
            >
              {{ item }}
            </el-tag>
          </div>
          <span v-else>暂无设备</span>
        </el-descriptions-item>

        <el-descriptions-item label="预约规则">
          <div class="multiline-text">{{ detailData.reservationRule || '暂无数据' }}</div>
        </el-descriptions-item>

        <el-descriptions-item label="会议室描述">
          <div class="multiline-text">{{ detailData.description || '暂无数据' }}</div>
        </el-descriptions-item>

        <el-descriptions-item label="是否需要审批">
          <el-tag effect="plain" :type="detailData.isApproval === '是' ? 'danger' : 'success'">
            {{ detailData.isApproval === '是' ? '需要审批' : '无需审批' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="状态">
          <el-tag effect="plain" :type="getStatusTagType(detailData.openStatus)">
            {{ formatStatus(detailData.openStatus) }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item v-if="detailData.createdAt" label="创建时间">
          {{ detailData.createdAt }}
        </el-descriptions-item>

        <el-descriptions-item v-if="detailData.updatedAt" label="更新时间">
          {{ detailData.updatedAt }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </qs-dialog>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, watch } from 'vue'
import { useDialog } from '../../hooks/useDialog'
import QsDialog from './index.vue'

// 组件属性定义
const props = defineProps({
  // 显示控制
  modelValue: {
    type: Boolean,
    default: false,
  },

  // 标题
  title: {
    type: String,
    default: '会议室详情',
  },

  // 宽度
  width: {
    type: [String, Number],
    default: '600px',
  },

  // 详情数据
  detailData: {
    type: Object,
    default: () => ({}),
  },

  // 房间状态枚举
  roomStatus: {
    type: Object,
    default: () => ({
      MAINTENANCE: '维护中',
      CLOSED: '未开放',
      OPEN: '开放中',
      IDLE: '空闲',
    }),
  },
})

// 组件事件
const emit = defineEmits(['update:modelValue', 'close'])

// 使用对话框Hook
const { visible, close } = useDialog({
  visible: props.modelValue,
  title: props.title,
})

// 同步modelValue和visible
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== visible.value) {
      visible.value = newVal
    }
  }
)

watch(
  () => visible.value,
  (newVal) => {
    if (newVal !== props.modelValue) {
      emit('update:modelValue', newVal)
    }
  }
)

// 设备标签列表
const equipmentTags = computed(() => {
  const { equipment, equipmentList } = props.detailData

  // 1. 如果有equipmentList且为数组，直接使用
  if (Array.isArray(equipmentList) && equipmentList.length > 0) {
    return equipmentList
  }

  // 2. 如果equipment是字符串，尝试分割
  if (typeof equipment === 'string' && equipment.trim()) {
    return equipment.split(',').filter(Boolean)
  }

  // 3. 处理数字类型的equipment
  if (equipment && typeof equipment === 'number') {
    return [String(equipment)]
  }

  // 默认返回空数组
  return []
})

// 获取设备标签类型
const getEquipmentTagType = (equipment: string): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  const typeMap: Record<string, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    投影仪: 'success',
    网络: 'info',
    电脑: 'warning',
    白板: 'primary',
    音响: 'danger',
    视频会议: 'success',
  }
  return typeMap[equipment] || 'primary'
}

// 获取状态标签类型
const getStatusTagType = (status: string | null): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  if (!status) return 'info'

  const statusValues = Object.values(props.roomStatus)
  if (!statusValues.includes(status)) return 'info'

  const typeMap: Record<string, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    [props.roomStatus.OPEN]: 'success',
    [props.roomStatus.CLOSED]: 'info',
    [props.roomStatus.MAINTENANCE]: 'danger',
    [props.roomStatus.IDLE]: 'primary',
  }
  return typeMap[status] || 'info'
}

// 格式化状态
const formatStatus = (status: string | null): string => {
  if (!status) return '未设置'

  const statusValues = Object.values(props.roomStatus)
  if (!statusValues.includes(status)) {
    // 如果不是已知状态，检查是否有值匹配
    for (const value of Object.values(props.roomStatus)) {
      if (value === status) return status
    }
    return '未知状态'
  }

  return status
}

// 事件处理
const handleClose = () => {
  emit('close')
}

const handleCancel = () => {
  close()
}

// 组件方法暴露
defineExpose({
  visible,
  open: () => (visible.value = true),
  close,
})
</script>

<style scoped>
.detail-container {
  padding: 10px;
}

.detail-descriptions {
  width: 100%;
}

.important-field {
  font-weight: 600;
  color: var(--el-color-primary);
  font-size: 16px;
}

.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equipment-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.multiline-text {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
}
</style>
